<template>
	<view class="content">
		<view class="search-box">
			<view class="search-box2">
				<image src="/static/ajr-search/search.png" mode=""></image>
				<input type="text" placeholder="请输入要搜索的关键词" focus confirm-type="search" @click="setArr()"
					v-model.trim="searchKey" @confirm="searchStart(searchKey)">

			</view>
		</view>
		<view class="search-history" v-if="isShowHistory">
			<view class="historytitle">
				<text>搜索历史</text>
				<view class="icon-box">
					<image src="/static/ajr-search/delete.png" mode="" @click="deleteHistory"></image>
				</view>
			</view>
			<view class="historybox" v-if="history.length>0">
				<view class="history-li" v-for="(item,index) in history" :key="index" @click="toSearchResult(item)">
					{{item}}
				</view>
			</view>
			<view class="historybox" v-else>
				<text class="historynone">暂无搜索历史</text>
			</view>
		</view>
		<view class="search-history" v-if="isShowHot">
			<view class="historytitle">
				<text>热门搜索</text>
				<view class="icon-box">
					<image src="/static/ajr-search/attention.png" mode="" @click="hideHot" v-if="showEye"></image>
					<image src="/static/ajr-search/attention_forbid.png" mode="" @click="showHot" v-if="!showEye">
					</image>
				</view>
			</view>
			<view class="historybox" v-if="showEye">
				<view class="history-li" v-for="(item,index) in hotList" :key="index">
					{{item}}
				</view>
			</view>
			<view class="historybox" v-if="!showEye">
				<view class="hidehot">
					当前热门搜索已隐藏
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isShowHistory: {
				type: Boolean,
				default: true
			},
			isShowHot: {
				type: Boolean,
				default: true
			},
			hotList: {
				type: Array,
				default () {
					return ["篮球鞋", "内裤", "手机", "袜子"]
				}
			}
		},

		data() {
			return {
				searchKey: '',
				history: uni.getStorageSync('searchHistory'),
				showEye: true,
			}
		},
		methods: {
			setArr() {
				this.history = [];
				uni.setStorageSync('searchHistory', [""])
			},
			searchStart: function(searchKey) {
				let _this = this
				if (_this.searchKey == '') {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none',
						duration: 2000
					})
					return
				}
				_this.$emit('getSearchText', _this.searchKey);
				// 把关键词做搜索历史
				_this.history.push(_this.searchKey);
				uni.setStorageSync('searchHistory', _this.history)
				uni.navigateTo({
					url: `/pages/SearchResult/SearchResult?searchKey=${searchKey}`
				});


			},
			deleteHistory() {
				this.history = [];
				uni.setStorageSync('searchHistory', [""])
			},
			hideHot() {
				this.showEye = false
			},
			showHot() {
				this.showEye = true
			},
			toSearchResult(item) {
				console.log(item, "0000");
				uni.navigateTo({
					url: `/pages/SearchResult/SearchResult?item=${item}`,
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;

		.search-box {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f1f1f1;

			.search-box2 {
				width: 96%;
				height: 90rpx;
				display: flex;
				align-items: center;
				background-color: #ffffff;
				border-radius: 40rpx;
				box-sizing: border-box;
				padding: 0 20rpx;

				image {
					width: 45rpx;
					height: 45rpx;
				}

				input {
					margin-left: 15rpx;
					color: #222222;
					font-size: 30rpx;
				}

			}

		}

		.search-history {
			width: 96%;
			height: auto;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 2%;

			.historytitle {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}

			.historybox {
				width: 100%;
				height: auto;
				display: flex;

				.historynone {
					font-size: 26rpx;
					color: #999;
					line-height: 60rpx;

				}

				.hidehot {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #999;
				}

				.history-li {
					width: auto;
					height: auto;
					padding: 10rpx 15rpx;
					background-color: rgb(249, 249, 249);
					border-radius: 5rpx;
					color: #6b6b6b;
					font-size: 28rpx;
				}
			}

		}
	}
</style>
